<template>
   <!-- 员工 -->
   <div class="dashboard-container">
      <div class="app-container">
         <PageTools :showBefore="true">
            <!-- 左侧显示总记录数 -->
            <!-- <span slot="before">共16条记录</span> -->
            <template #before>
               <span slot="before">共{{ page.total }}条记录</span>
            </template>
            <!-- 右侧显示按钮 -->
            <template #after>
               <el-button
                  size="small"
                  type="success"
                  @click="$router.push('/import')"
               >
                  excel导入
               </el-button>
               <el-button size="small" type="danger" @click="exportData">
                  excel导出
               </el-button>
               <el-button
                  size="small"
                  type="primary"
                  @click="showDialog = true"
                  :disabled="!checkPermission('POINT-USER-ADD')"
               >
                  新增员工
               </el-button>
            </template>
         </PageTools>
         <!-- 表格组件 -->
         <!-- v-loading  是ele-ui 提供的，全局注册了，就有这个自定义指令 -->
         <el-table v-loading="loading" :data="list" border>
            <!-- sortable 排序 -->
            <el-table-column label="序号" sortable="" type="index" />
            <el-table-column label="姓名" sortable="" prop="username" />
            <el-table-column width="120px" label="头像" align="center">
               <!-- <template slot-scope="{ row }"></template> -->
               <template v-slot="{ row }">
                  <img
                     @click="showQrCode(row.staffPhoto)"
                     :src="row.staffPhoto"
                     alt=""
                     style="border-radius: 50%; width: 100px; height: 100px; padding: 10px"
                     v-imagerror="
                        require('../../assets/common/bigUserHeader.png')
                     "
                  />
               </template>
            </el-table-column>
            <el-table-column label="手机号" sortable="" prop="mobile" />
            <el-table-column label="工号" sortable="" prop="workNumber" />
            <!-- formatter 用来格式化内容 -->
            <el-table-column
               label="聘用形式"
               sortable=""
               prop="formOfEmployment"
               :formatter="formatEmployment"
            />
            <el-table-column
               label="部门"
               sortable=""
               prop="departmentName"
            />
            <el-table-column
               label="入职时间"
               sortable=""
               prop="timeOfEntry"
            >
               <!-- 作用域插槽 + 过滤器 -->
               <!-- 作用域插槽：想拿到组件内部的数据，想要在模板外部拿到内部数据做的事情-->
               <!-- <template slot-scope="obj"></template> -->
               <template v-slot="{ row }">
                  {{ row.timeOfEntry | formatDate }}
               </template>
            </el-table-column>
            <!-- 当我们需要改变默认的数据的时候，那么就用插槽 -->
            <el-table-column
               label="账户状态"
               sortable=""
               prop="enableState"
            >
               <template v-slot="{ row }">
                  <el-switch :value="row.enableState === 1"></el-switch>
               </template>
            </el-table-column>
            <el-table-column
               label="操作"
               sortable=""
               fixed="right"
               width="280"
            >
               <!-- <template slot-scope="{ row }"> -->
               <template v-slot="{ row }">
                  <el-button
                     type="text"
                     size="small"
                     @click="$router.push(`/employees/detail/${row.id}`)"
                  >
                     查看
                  </el-button>
                  <el-button type="text" size="small">转正</el-button>
                  <el-button type="text" size="small">调岗</el-button>
                  <el-button type="text" size="small">离职</el-button>
                  <el-button
                     type="text"
                     size="small"
                     @click="editRole(row.id)"
                  >
                     角色
                  </el-button>
                  <el-button
                     type="text"
                     size="small"
                     @click="delEmployee(row.id)"
                  >
                     删除
                  </el-button>
               </template>
            </el-table-column>
         </el-table>
         <!-- 分页组件 -->
         <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 60px"
         >
            <el-pagination
               layout="prev, pager, next"
               :page-size="page.size"
               :current-page="page.page"
               :total="page.total"
               @current-change="changePage"
            />
         </el-row>
      </div>
      <!-- 新增员工弹层 -->
      <!-- sync 子组件改变父组件数据的语法糖 -->
      <AddEmployee :showDialog.sync="showDialog"></AddEmployee>
      <!-- 二维码弹层 -->
      <el-dialog title="二维码" :visible.sync="showCodeDialog">
         <el-row type="flex" justify="center">
            <!-- es6标签 -->
            <canvas ref="myCanvas"></canvas>
         </el-row>
      </el-dialog>
      <!-- 角色弹层 -->
      <AssignRole
         :showRoleDialog.sync="showRoleDialog"
         :userId="userId"
         ref="assignRole"
      ></AssignRole>
   </div>
</template>

<script>
import { getEmployeeList, delEmployee } from '../../api/employees'
// 引入员工的枚举对象
import EmployeeEnum from '../../api/constant/employees'
import AddEmployee from './components/add-employee.vue'
import { formatDate } from '../../filters/index'
import QrCode from 'qrcode'
import AssignRole from './components/assign-role.vue'
export default {
   components: {
      AddEmployee,
      AssignRole
   },
   data() {
      return {
         // 接受数组
         list: [],
         page: {
            // 页码
            page: 1,
            size: 10,
            // 总数
            total: 0
         },
         // 显示遮罩层
         loading: false,
         // 新增员工的弹层
         showDialog: false,
         // 显示二维码弹层
         showCodeDialog: false,
         // 角色分配弹出层
         showRoleDialog: false,
         // 定义一个 id
         userId: ''
      }
   },
   created() {
      this.getEmployeeList()
   },
   methods: {
      // 获取员工基本信息
      async getEmployeeList() {
         this.loading = true
         const { total, rows } = await getEmployeeList(this.page)
         this.page.total = total
         this.list = rows
         this.loading = false
      },
      changePage(newPage) {
         // 赋值最新的页码
         this.page.page = newPage
         // 重新拉取数据
         this.getEmployeeList()
      },
      // 格式化聘用形式
      formatEmployment(row, column, cellValue, index) {
         // row 是当前行的数据
         // column 列属性
         // cellValue 单元格的值，每一行里边 聘用形式的值
         // 要去找 1 所对应的值
         // obj 就是找的结果
         const obj = EmployeeEnum.hireType.find(
            item => item.id === cellValue
         )
         return obj ? obj.value : '未知'
      },
      // 删除
      async delEmployee(id) {
         try {
            await this.$confirm('确定删除该员工吗？')
            // 点击了确定会进入下方
            await delEmployee(id)
            this.$message.success('删除员工成功')
            // 重新加载数据
            this.getEmployeeList()
         } catch (error) {
            console.log(error)
         }
      },
      // 导出
      exportData() {
         // 对应关系
         const headers = {
            姓名: 'username',
            手机号: 'mobile',
            入职日期: 'timeOfEntry',
            聘用形式: 'formOfEmployment',
            转正日期: 'correctionTime',
            工号: 'workNumber',
            部门: 'departmentName'
         }
         // 按需导入
         import('../../vendor/Export2Excel').then(async excel => {
            // excel 是引入文件的导出对象
            // console.log(excel)
            // 获取所有数据
            const { rows } = await getEmployeeList({
               page: 1,
               size: this.page.total
            })
            // 要跟表头对应上，传入,返回的data 就是导出的结构
            const data = this.formatJson(headers, rows)
            // 复杂表头： 就是在表头上再加一行头,一个数组代表一行  例：
            // const multiHeader = [
            //    ['a', 'b', 'c', 'd', 'e', 'f', 'e'],
            //    [1, 2, 3, 4, 5, 6, 7]
            // ]
            const multiHeader = [
               ['姓名', '主要信息', '', '', '', '', '部门']
            ]
            // 合并单元格
            const merges = ['A1:A2', 'B1:F1', 'G1:G2']
            // 导出：
            excel.export_json_to_excel({
               header: Object.keys(headers),
               data,
               filename: '员工资料表',
               // 复杂表头
               multiHeader,
               // 合并选项
               merges
            })
            // excel.export_json_to_excel({
            //    header: ['姓名', '工资'],
            //    data: [],
            //    filename: '员工工资表'
            // })
            // 要转换数据结构，还要跟表头的顺序对应上
            // 要求导出的格式是中文
         })
      },
      // 转换数据结构
      // 将表头数据跟数据进行对应
      // 由  [{}]  --->  [[]]
      formatJson(headers, rows) {
         // 每一个对象转换成数组，本来是一个数组，里边再次嵌套一个数组
         return rows.map(item => {
            // item是一个对象
            // Object.keys(headers) 得到的是：
            // ['手机号','姓名'....]
            return Object.keys(headers).map(key => {
               // 需要判断 字段，处理时间格式跟聘用形式
               if (
                  headers[key] === 'timeOfEntry' ||
                  headers[key] === 'correctionTime'
               ) {
                  // 格式化日期
                  return formatDate(item[headers[key]])
               } else if (headers[key] === 'formOfEmployment') {
                  // 注意变量名重复
                  const obj = EmployeeEnum.hireType.find(
                     obj => obj.id === item[headers[key]]
                  )
                  return obj ? obj.value : '未知'
               }
               return item[headers[key]]
            })
         })
         // 简写
         // return rows.map(item => {
         //    Object.keys(headers).map(key => item[headers[key]])
         // })
      },
      // 二维码
      showQrCode(url) {
         // 应该在 url 存在的情况下才弹出层
         if (url) {
            // 数据更新了，但是弹层不会立刻出现，页面的渲染是异步的
            this.showCodeDialog = true
            // 等数据更新完毕页面渲染完毕之后执行
            // 此时可以确认已经有 ref 对象了
            this.$nextTick(() => {
               // 将地址转换成二维码
               // dom 对象， 跟 地址
               // 如果后边的信息是一个地址的话，就会跳转到该地址，不是地址就会显示内容
               QrCode.toCanvas(this.$refs.myCanvas, url)
            })
         } else {
            this.$message.warning('该用户没有上传头像')
         }
      },
      // 点击角色
      async editRole(id) {
         // 给props赋值，并且渲染，是异步的
         this.userId = id
         // 调用子组件的方法，async 包裹的是异步方法，先强制异步执行完再去弹层，解决闪屏的问题
         await this.$refs.assignRole.getUserDetailById(id)
         this.showRoleDialog = true
      }
   }
}
</script>

<style></style>
